<template>
	<view class="content  ">
		<view class="header-report flex-center">
			<view class="select-date-box">
				<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			</view>
			<view class="title flex-center">近10周学习数据对比</view>
			<view class="title flex-center">拓展课程</view>
		</view>
		<view class="content-report">
			<view class="tr-header flex-align-center">
				<view class="  tr-header-item " style="width: 10%;">
					单元名
				</view>
				<view class="tr-header-item unit-vocabulary">
					词汇
				</view>
				<view class="tr-header-item unit-sentence">
					句子
				</view>
				<view class="tr-header-item unit-yufa">
					语法
				</view>
				<view class="tr-header-item unit-kewen">
					课文
				</view>
				<view class="tr-header-item unit-xiti">
					习题
				</view>
			</view>
			<view class="td-list-box">
				<view class="td-list flex-align-center">
					<view class="unit-name td-list-item">
						Unit1
					</view>
					<view class="unit-vocabulary td-list-item  ">
						<view class="flex-align-center">
							<span>词汇一</span>
							<view class="flex-align-center vocabulary-item">
								<image src="../../../../static/images/common/yuan-kong.png"></image>
								<image src="../../../../static/images/common/yuan-kong.png"></image>
								<image src="../../../../static/images/common/duigou-ban.png"></image>
								<image src="../../../../static/images/common/yuan-kong.png"></image>
							</view>
						</view>

					</view>
					<view class="unit-sentence td-list-item">
						<view class="flex-align-center">
							<image src="../../../../static/images/common/yuan-kong.png"></image>
							<image src="../../../../static/images/common/yuan-kong.png"></image>
							<image src="../../../../static/images/common/duigou-ban.png"></image>
							<image src="../../../../static/images/common/yuan-kong.png"></image>
						</view>

					</view>
					<view class="unit-yufa td-list-item">
						<view class="flex-align-center">
							<image src="../../../../static/images/common/duigou.png"></image>

						</view>
					</view>
					<view class="unit-kewen td-list-item">
						<view class="flex-align-center">
							<image src="../../../../static/images/common/yuan-kong.png"></image>
							<image src="../../../../static/images/common/yuan-kong.png"></image>
							<image src="../../../../static/images/common/duigou-ban.png"></image>
							<image src="../../../../static/images/common/yuan-kong.png"></image>
						</view>
					</view>
					<view class="unit-xiti td-list-item">
						<view class="flex-align-center">
							<image src="../../../../static/images/common/yuan-kong.png"></image>
							<image src="../../../../static/images/common/yuan-kong.png"></image>
							<image src="../../../../static/images/common/duigou-ban.png"></image>
							<image src="../../../../static/images/common/yuan-kong.png"></image>
						</view>
					</view>
				</view>
				<view class="td-list">

				</view>
				<view class="td-list">

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {


		},
		data() {
			return {
				value: "",
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
			}
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.color-716E6E {
		color: #716E6E;

	}

	.color-50A056 {
		color: #50A056;
	}

	.line {
		width: 1rpx;
		height: px_2_vw(29);
		border-left: 1rpx solid #000;
		margin: 0 19rpx;
	}

	.content {
		width: 100%;
		height: 100%;
		background: #fff;
		border-radius: 65rpx;


		// padding: 57rpx 50rpx;
		.header-report {
			width: 100%;
			height: px_2_vw(127);
			background: #C0C3F5;
			border-radius: 65rpx 65rpx 0px 0px;
			padding: 33rpx 44rpx;

			.select-date-box {
				width: px_2_vw(341);
				height: px_2_vw(70);
			}

			.title {
				padding: 0 41rpx;
				height: px_2_vw(70);
				background: #F5F5F6;
				border-radius: 10rpx;
				margin-left: 30rpx;
				color: #0514FA;
				font-weight: 600;
			}
		}

		.content-report {
			padding: 49rpx 50rpx;
			overflow-y: auto;
			height: calc(100vh - 300rpx);

			.tr-header {
				padding: 23rpx 29rpx;
				margin-bottom: 20rpx;
				// padding-right: 160rpx;
			}

			.tr-header-item {
				// flex: 1;
				color: #898989 !important;
				;
				font-weight: 400;
				font-size: px_2_vw(30);
				text-align: center;
			}

			.unit-name {
				color: #000 !important;
				width: 10%;
				font-weight: bold;
				font-size: px_2_vw(30);
			}

			.unit-vocabulary {
				width: 25%;


			}

			.unit-sentence {
				width: 15%;
			}

			.unit-yufa {
				width: 20%;
			}

			.unit-kewen {
				width: 15%;
			}

			.unit-xiti {
				width: 15%;
			}

			.unit-handle {
				width: 10%;
			}

			.td-list-box {
				height: calc(75vh - 200rpx);
				// border: 1rpx solid #000;
				overflow-y: auto;
			}

			.td-list {
				background-color: #DFE1FA;
				height: px_2_vw(187);
				width: 100%;
				border-radius: 40rpx;
				margin-bottom: 48rpx;


				.td-list-item {
					color: #898989;
					font-size: px_2_vw(24);
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: px_2_vw(22);
						height: px_2_vw(22);
						margin-right: 10rpx;
					}

					span {
						margin-right: 10rpx;
					}
				}

				.choose-btn {
					// position: absolute;
					min-height: px_2_vw(51);
					width: px_2_vw(116);
					border: 1rpx solid #0E6BFF;
					border-radius: 25rpx;
					color: #0E6BFF;
					font-size: px_2_vw(31);
					// margin-right: 40rpx;
					// right: 93rpx;

				}

			}


		}

		::v-deep .uni-select {
			border: 1px solid #0600FF;
		}

		::v-deep .uni-select__input-placeholder {
			color: #0514FA;
			font-weight: 600;
		}

		::v-deep .uni-select__input-text {
			color: #0514FA;
			font-weight: 600;
		}



	}
</style>